<template>
    <div>
        <DescribePanel :info="info" :editorwidth="800" :editorheight="300" :attributes="attributes" :extra="extra" :events="events">
            <div class="drop">
                <DropDown v-model:value="value" :subject="subject"></DropDown>
                <DropDown v-model:value="value1" :defaultFirst="false" :subject="subject"></DropDown>
            </div>
        </DescribePanel>
    </div>
</template>

<script>
/* eslint-disable*/
import DropDown from '../common/DropDown'
import DescribePanel from './DescribePanel'

export default {
	components: {
		DropDown,
		DescribePanel
	},
	data() {
		return {
			value: '',
			value1: '',
			subject: [
				{
					value: '选项一',
					text: '选项一'
				},
				{
					value: '选项二',
					text: '选项二'
				},
				{
					value: '选项三',
					text: '选项三',
					disable: true
				}
			],
			info: {
				title: 'Select 选择器',
				des: '当选项过多时，使用下拉菜单展示并选择内容。',
				editor: `\n<Select  v-model:value="value" :subject="subject"></Select>\n \n<script>\n  data() {\n     return {\n         value:'',\n         subject:[\n                  {value:'选项一',text:'选项一'},\n                  {value:'选项二',text:'选项二'},\n                  {value:'选项三',text:'选项三',disable:true}\n                 ] \n  }\n}\n<script>`
			},
			attributes: [
				{
					param: 'v-model:value',
					des: '绑定值',
					type: 'boolean / string / number',
					selectvalue: '——',
					defaultvalue: '——'
				},
				{
					param: 'subject',
					des: '内容项',
					type: 'array',
					selectvalue: '——',
					defaultvalue: '如组件所示'
				},
				{
					param: 'defaultFirst',
					des: '是否默认第一项',
					type: 'boolean',
					selectvalue: 'true/false',
					defaultvalue: 'true'
				},
				{
					param: 'width',
					des: '宽度',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '80px'
				},
				{
					param: 'height',
					des: '高度',
					type: 'number',
					selectvalue: '——',
					defaultvalue: '25px'
				}
			],
			extra: {
				title: 'Item',
				data: [
					{
						param: 'value',
						des: '选项实际内容',
						type: 'boolean / string / number',
						selectvalue: '——',
						defaultvalue: '——'
					},
					{
						param: 'text',
						des: '选项表面内容',
						type: 'boolean / string / number',
						selectvalue: '——',
						defaultvalue: '——'
					},
					{
						param: 'disable',
						des: '是否禁用该选项',
						type: 'boolean',
						selectvalue: '——',
						defaultvalue: 'false'
					}
				]
			},
			events: []
		}
	},
	mounted() {}
}
</script>

 <style scoped>
h2 {
	font-weight: 400;
}
.drop {
	display: flex;
}
.drop > div {
	margin-right: 20px;
}
</style>
